<template>
	<view class="content">
		<view style="padding: 70rpx 0 10rpx 10rpx;width: 65%;">
			<u-search bg-color="white" placeholder="搜索商品" v-model="keyword" shape="round" :clearabled="true" :show-action="true" action-text="搜索" @search="goSearch()" @custom="goSearch()"></u-search>
		</view>
		<view class="wrap">
			<u-swiper :list="lunboImg" height="1000rpx"></u-swiper>
		</view>
		<!-- 所有商品分页显示 -->
		<view class="good-box" v-if="allGoods.length>0">
			<view class="goods-item" v-for="(item,i) in allGoods" :key="item.gid" @click="goDetail(item.gid)">
				<image :src="switchImg(allGoods,i)" class="goods-img" mode="widthFix"></image>
				<view class="fgx">
					<view class="goods-miaoshu" style="color: #82848A;">{{isNull(item.gname) ? item.gName : item.gname}}</view>
					<view class="small-container">
						<view>
							<text class="qian">{{isNull(item.gprice) ? item.gPrice : item.gprice}}</text>
						</view>
						<!-- <view>
							<image src="../../static/index/gm.png" class="xiaoche"></image>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- <view v-show="allGoods.length<1" class="no-goods-box">
			<view>还没有商品</view>
		</view> -->
		<view class="tips-text">{{tips}}</view>
		<!-- <u-tabbar v-model="current" :list="list" :mid-button="false"></u-tabbar> -->
		<view class="tabbar">
			<view style="text-align: center;color: #FF7900;">
				<uni-icons type="home" color="#FF7900" size="20"></uni-icons>
				<view>首页</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(1)">
				<uni-icons type="map" size="20"></uni-icons>
				<view>联盟商家</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(2)">
				<uni-icons type="list" size="20"></uni-icons>
				<view>分类</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(3)">
				<uni-icons type="cart" size="20"></uni-icons>
				<view>购物车</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(4)">
				<uni-icons type="person" size="20"></uni-icons>
				<view>个人中心</view>
			</view>
		</view>
	</view>
</template>

<script>
	import amap from '../utils/amap-wx.130.js';		// 高德小程序插件  
	export default {
		data() {
			return {
				rawList:[],				// 轮播图原始数据
				allGoods:[ ],			// 分页查询的商品
				tips:"上拉加载更多数据",
				page:1,					// 当前页数
				souPage:1,				// 搜索的当前页数
				limit:10,				// 每页数量
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
						pagePath: "/pages/jifen/index"
					},
					{
						iconPath: "grid",
						selectedIconPath: "grid-fill",
						text: '联盟商家',
						customIcon: false,
						pagePath: "/pages/jifen/merchant/merchantList"
					},
					{
						iconPath: "coupon",
						selectedIconPath: "coupon-fill",
						text: '分类',
						customIcon: false,
						pagePath: "/pages/jifen/goods/goodsFenlei"
					},
					{
						iconPath: "shopping-cart",
						selectedIconPath: "shopping-cart-fill",
						text: '购物车',
						customIcon: false,
						pagePath: "/pages/jifen/cart/cart"
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '个人中心',
						customIcon: false,
						pagePath: "/pages/jifen/center/center"
					},
				],
				current: 0,
				keyword: '',		//搜索框的值
				
				//定位信息
				key: '2f7f27be426ba68483764cd2e9f2c968' ,
				sheng: "",
				shi: "",
				qu: "",
			}
		},
		onReachBottom() {
			if(this.tips=='上拉加载更多数据')
			{
				this.page++;
				if(this.keyword==null || this.keyword=="" || this.keyword==undefined){
					this.getGoodsByType();
				}else{
					this.$http.get('/jifenGoodsSolr/search',{
						page:this.page,
						limit:this.limit,
						key:this.keyword
					}).then(res => {
						if(res.data.length > 0){
							this.allGoods = this.allGoods.concat(res.data)
						}else{
							// this.$http.get('/xieliangoods/chaFenyeJifenGoodsByName', {
							// 	page:this.souPage,
							// 	limit:this.limit,
							// 	gname:this.keyword
							// }).then(res => {
							// 	if(res.data.data.length>0)
							// 		this.allGoods=this.allGoods.concat(res.data.data);
							// 	else{
									this.tips="没有更多数据";
							// 	}
							// })
						}
						// console.log(this.allGoods)
					})
				}
			}
		},
		onLoad() {
			// 查询轮播图
			this.$http.get('/wapgoods.do', {
				p: 'findAlllbt',
			}).then(res => {
				this.rawList = res.data.list;
			})
			
			// 查询用户地址
			this.getAddress();
			// 查询商品
			// this.getGoodsByType()
		},
		methods: {
			//底部tab跳转
			tabbarPage(index){
				uni.redirectTo({
					url:index==1?'merchant/merchantList':(index==2?'goods/goodsFenlei':(index==3?'cart/cart':'center/center'))
				})
			},
			// 得到用户的地址
			getAddress(){
				//使用高德插件定位
				this.amapPlugin = new amap.AMapWX({  	// 初始化高德插件
					key: this.key  
				}); 
				this.amapPlugin.getRegeo({  
					success: (data) => {
						// this.addressName = data[0].name.substr(0,3); 
						this.sheng = data[0].regeocodeData.addressComponent.province;
						let shiqu = data[0].regeocodeData.addressComponent.city;
						if(shiqu==null || shiqu=="" || shiqu==undefined || shiqu.length<1){
							
						}else{
							this.shi = shiqu;
						}
						this.qu = data[0].regeocodeData.addressComponent.district;
						console.log("积分商城首页  省份："+this.sheng+" 城市："+this.shi+" 区域："+this.qu)
						uni.setStorageSync("areaName",this.qu);
						this.getGoodsByType();
					},
					fail: (res) => {
						this.getGoodsByType();
						console.log(JSON.stringify(res));
					}
				});
			},
			// n:排序规则
			getGoodsByType(){
				if(this.qu!=null && this.qu!="" && this.qu!=undefined){
					console.log("根据定位区域查询商品："+this.qu)
					this.$http.get('/xieliangoods/chaFenyeJifenGoodsByArea', {
						page:this.page,
						limit:this.limit,
						qu:this.qu
					}).then(res => {
						// console.log("页数："+this.page)
						if(res.data.data.length>0){
							this.allGoods=this.allGoods.concat(res.data.data);
						}else{
							this.tips="没有更多数据";
						}
						// console.log(this.allGoods)
					})
				}else{
					this.$http.get('/xieliangoods/chaFenyeJifenGoods', {
						page:this.page,
						limit:this.limit
					}).then(res => {
						// console.log("页数："+this.page)
						if(res.data.data.length>0){
							this.allGoods=this.allGoods.concat(res.data.data);
						}else{
							this.tips="没有更多数据";
						}
						// console.log(this.allGoods)
					})
				}
			},
			switchImg(obj,n){
				if(obj.length>0){
					if(this.isNull(obj[n].gimages) && !this.isNull(obj[n].gImages)){
						return this.host + obj[n].gImages
					}
					return this.host+obj[n].gimages;
				}else{
					return '../static/index/gm.png';
				}
			},
			//商品详情
			goDetail(n){
				uni.navigateTo({
					url:'goods/goodsDetail?gid='+n
				})
			},
			// 搜索
			goSearch(){
				console.log('搜索:'+this.keyword)
				this.allGoods = [];
				this.page = 1;
				if(this.keyword==null || this.keyword=="" || this.keyword==undefined){
					this.tips = "上拉加载更多数据";
					this.getGoodsByType()
				}else{
					this.$http.get('/jifenGoodsSolr/search',{
						page:this.page,
						limit:this.limit,
						key:this.keyword
					}).then(res => {
						if(res.data.length > 0){
							this.allGoods = this.allGoods.concat(res.data)
							if(res.data.length == this.limit){
								this.tips = "上拉加载更多数据";
							}
						}else{
							this.$http.get('/xieliangoods/chaFenyeJifenGoodsByName', {
								page:this.souPage,
								limit:this.limit,
								gname:this.keyword
							}).then(res => {
								if(res.data.data.length>0)
									this.allGoods=this.allGoods.concat(res.data.data);
								else{
									this.tips="没有更多数据";
								}
							})
						}
						// console.log(this.allGoods)
					})
				}
			},
			//判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		},
		computed:{
			lunboImg(){
				let tu=[	];
				for(let i=0;i<this.rawList.length;i++){
					let obj = {	};
					obj.image=this.host+this.rawList[i].cimages;
					obj.title=this.rawList[i].cimgTitle;
					tu.push(obj);
				}
				return tu;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tabbarImage{
		width: 20px;
		height: 20px;
	}
	.tabbar{
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-align: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 998;
		box-sizing: content-box;
		justify-content: space-around;
		background-color: white;
		font-size: 11px;
		padding: 20rpx 0 20rpx 0;
		border-top: 1rpx #DCDFE6 solid;
	}
	
	page{
		background-color: #f1f1f1;
	}
	.fenlei-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.fenlei-box .fenlei-item{
		margin: 10rpx 30rpx;
	}
	.renpintj{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.tuijianbox {
	    padding-top: 10px;
	    width: 200rpx;
	    height: 200rpx;
	    text-align: center;
	    color: white;
	    background-repeat: no-repeat;
	    background-size: 100%;
	}
	.tuijianbox .fonts{
		font-size: 16rpx;
		position: relative;
		top: 10rpx;
	}
	.tuijianbox .tui-img{
		margin: auto;
	}
	.tuijianbox:nth-child(1) {
	    background-image: url('../static/index/kk-1.png');
	}.tuijianbox:nth-child(2) {
	    background-image: url('../static/index/kk-2.png');
	}.tuijianbox:nth-child(3) {
	    background-image: url('../static/index/kk-3.png');
	}
	.tab-box{
		display: flex;
		margin-top: 20rpx;
		padding-left: 20rpx;
	}
	.tab-box .active{
		border-bottom: 5rpx solid red;
	}
	.tab-box .tab-item{
		margin-right: 20rpx;
	}
	.good-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.goods-item {
	    width: 49%;
	    margin: 5rpx auto;
	    background-color: white;
	    padding: 20rpx 5rpx;
	}
	.goods-item .goods-img {
	    max-height: 200rpx;
	    width: 300rpx;
	    display: block;
	    margin: auto;
	}
	.fgx {
	    // border-top: 1px solid #ccc;
	    width: 80%;
	    margin: auto;
	    margin-top: 0.625rem;
		padding-top: 10rpx;
		text-align: center;
	}
	.qian::before {
	    content: '￥';
	    color: red;
	    font-size: 12px;
	    font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
	}
	.goods-miaoshu{
		display:-webkit-box;
		overflow:hidden;
		text-overflow:ellipsis;
		-webkit-line-clamp:1;
		-webkit-box-orient:vertical;
	}
	.small-container {
		margin-top: 10rpx;
	    display: flex;
		font-size: 14px;
		font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
		color: red;
	    // justify-content: space-between;
		justify-content: center;
	}
	.small-container>view:nth-child(2)>.xiaoche {
	    width: 40rpx;
		height: 40rpx;
	}
	.tips-text,.no-goods-box{
		text-align: center;
		padding-bottom: 125rpx;
	}
	.good-box::after{
		content: '';
		width: 50%;
	}
</style>
